<!DOCTYPE html>
<html style="height: 100%;">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="renderer" content="webkit" />
	<!-- 让360浏览器默认选择webkit内核 -->

    <!-- 全局css -->
    <link rel="shortcut icon" href="/static/favicon.ico">
    <link href="/static/libs/bootstrap/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="/static/libs/font-awesome/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="/static/libs/ztree/zTreeStyle.css" rel="stylesheet">
    <link href="/static/backend/common.css" rel="stylesheet">

    <!-- 全局js -->
    <script src="/static/libs/jquery/jquery.min.js?v=2.1.4"></script>
    <script src="/static/libs/bootstrap/bootstrap.min.js?v=3.3.6"></script>
    <script src="/static/libs/ztree/jquery.ztree.all.min.js"></script>
    <script src="/static/libs/ztree/jquery.ztree.exhide.min.js"></script>
    <script src="/static/libs/ztree/fuzzySearch.js"></script>

</head>

<body style="height: 100%;">
	<div class="wrapper">
		<div class="treeShowHideButton" onclick="search();">
			<label id="btnShow" title="显示搜索" style="display: none;">︾</label> 
			<label id="btnHide" title="隐藏搜索">︽</label>
		</div>
		<div class="treeSearchInput" id="search">
			<label for="keyword">关键字：</label>
			<input type="text" class="empty" id="keyword" maxlength="50">
			<button class="btn" id="btn" onclick="searchNode()">搜索</button>
		</div>
		<div class="treeExpandCollapse">
			<a href="javascript:" onclick="tree.expandAll(true);">展开</a> /
			<a href="javascript:" onclick="tree.expandAll(false);">折叠</a>
		</div>
		<div id="tree" class="ztree treeselect"></div>
	</div>
	<script type="text/javascript">
		var tree;
		var initTree = function(url, isMulti, ids) {
			var setting = {
					view : {
						selectedMulti : isMulti,
						dblClickExpand : false
					},
					check : {
						enable : isMulti,
						nocheckInherit : false,
						chkboxType: { "Y": "s", "N": "s" }
					},
					data : {
						simpleData : {
							enable : true
						}
					},
					callback : {
						onClick : function(event, treeId, treeNode) {
							tree.expandNode(treeNode);
						},
						onDblClick : function() {
							if(!isMulti){
								parent.$('#' + window.name).closest('.layui-layer').find(
								".layui-layer-btn0").trigger("click");
							}
						}
					}
				};
			$.get(url + "?t=" + new Date().getTime(), function(zNodes) {
				tree = $.fn.zTree.init($("#tree"), setting, zNodes);//.expandAll(true);
				//$.fn.zTree.expandNodeByLevel(tree, -1);
				if (zNodes && zNodes.length > 0) {
					var attrName = zNodes[0].value ? 'value' : 'id';
					if(ids&&ids!=""){
						var selectCodes = ids.split(",");
						selectCheckNode(attrName, selectCodes,isMulti);
					}
				}
			});
		};
		function selectCheckNode(attrName, selectCodes,isMulti) {
			for (var i = 0; i < selectCodes.length; i++) {
				var node = tree.getNodeByParam(attrName,selectCodes[i]);
				if (isMulti) {
					try {
						tree.checkNode(node, true, false);
					} catch (e) {
					}
					tree.selectNode(node, false);
				} else {
					tree.selectNode(node, true);
				}
			}
		}
		var lastValue = "", nodeList = [], key = $("#keyword");
		key.bind("focus", focusKey).bind("blur", blurKey).bind(
				"change cut input propertychange", searchNode);
		key.bind("keydown", function(e) {
			if (e.which == 13) {
				searchNode();
			}
		});
		function focusKey(e) {
			if (key.hasClass("empty")) {
				key.removeClass("empty");
			}
		}
		function blurKey(e) {
			if (key.get(0).value === "") {
				key.addClass("empty");
			}
			searchNode(e);
		}
		function searchNode() {
			var value = $.trim(key.get(0).value);
			var keyType = "name";
			if (lastValue === value) {
				return;
			}
			lastValue = value;
			var nodes = tree.getNodes();
			if (value == "") {
				showAllNode(nodes);
				return;
			}
			hideAllNode(nodes);
			nodeList = tree.getNodesByParamFuzzy(keyType, value);
			updateNodes(nodeList);
		}
		function hideAllNode(nodes) {
			nodes = tree.transformToArray(nodes);
			for (var i = nodes.length - 1; i >= 0; i--) {
				tree.hideNode(nodes[i]);
			}
		}
		function showAllNode(nodes) {
			nodes = tree.transformToArray(nodes);
			for (var i = nodes.length - 1; i >= 0; i--) {
				if (nodes[i].getParentNode() != null) {
					tree.expandNode(nodes[i], false, false, false, false);
				} else {
					tree.expandNode(nodes[i], true, true, false, false);
				}
				tree.showNode(nodes[i]);
				showAllNode(nodes[i].children);
			}
		}
		function updateNodes(nodeList) {
			tree.showNodes(nodeList);
			for (var i = 0, l = nodeList.length; i < l; i++) {
				var treeNode = nodeList[i];
				showChildren(treeNode);
				showParent(treeNode)
			}
		}
		function showChildren(treeNode) {
			if (treeNode.isParent) {
				for ( var idx in treeNode.children) {
					var node = treeNode.children[idx];
					tree.showNode(node);
					showChildren(node);
				}
			}
		}
		function showParent(treeNode) {
			var parentNode;
			while ((parentNode = treeNode.getParentNode()) != null) {
				tree.showNode(parentNode);
				tree.expandNode(parentNode, true, false, false);
				treeNode = parentNode;
			}
		}
		function search($this) {
			$('#search').slideToggle(200);
			$('#btnShow').toggle();
			$('#btnHide').toggle();
			$('#keyword').focus();
		}
	</script>
</body>
</html>